<template>
	<base-popup ref="popupRef" round mode="center">
		<view class="form-containers">
			<view class="form-containers__title">完善用户信息</view>

			<view class="form-containers__form">
				<nut-form :model-value="state.form" :rules="state.rules" ref="formRef" label-width="80px">
					<nut-form-item label="所属制造商" prop="manufacturerName" style="position: relative;">
						<nut-input v-model="state.form.manufacturerName" placeholder="请输入制造商名称" @input="handleInputManufacturer"></nut-input>
						<view class="form-containers__depts" v-if="state.manufacturerList.length > 0 && state.selectVisible">
							<view class="item" v-for="x in state.manufacturerList" :key="x" @click="handleSelectManufacturer(x)">
								{{ x.manufacturerName }}
							</view>
						</view>
					</nut-form-item>
					<nut-form-item label="单位名称" prop="companyName">
						<nut-input v-model="state.form.companyName" placeholder="请输入单位名称"></nut-input>
					</nut-form-item>
					<nut-form-item label="单位地址" prop="companyAddress">
						<nut-input v-model="state.form.companyAddress" placeholder="请输入单位地址"></nut-input>
					</nut-form-item>
					<nut-form-item label="联系人" prop="username">
						<nut-input v-model="state.form.username" placeholder="请输入联系人"></nut-input>
					</nut-form-item>
					<nut-form-item label="联系电话" prop="userMobile">
						<nut-input v-model="state.form.userMobile" placeholder="请输入联系电话"></nut-input>
					</nut-form-item>

					<nut-button type="info" @click="submit" block style="margin: 10px 0;">提交</nut-button>
				</nut-form>
			</view>
		</view>
	</base-popup>
</template>

<script setup>
import { getCurrentInstance, ref, reactive } from 'vue';
import { searchManufacturer, saveCompanyUserInfo } from '@/network/apis';
import BasePopup from '@/components/base-popup/uv-popup.vue';
import { debounce } from 'lodash-es';

const emits = defineEmits(['success']);
const { proxy } = getCurrentInstance();
const formRef = ref(null);
const popupRef = ref(null);

const state = reactive({
	form: {
		manufacturerName: undefined,
		manufacturerId: undefined,
		companyName: undefined,
		companyAddress: undefined,
		username: undefined,
		userMobile: proxy.$storage.get('mobile')
	},
	rules: {
		manufacturerName: [{ required: true, message: '请输入制造商名称' }],
		companyName: [{ required: true, message: '请输入单位名称' }],
		companyAddress: [{ required: true, message: '请输入单位地址' }],
		username: [{ required: true, message: '请输入联系人' }],
		userMobile: [{ required: true, message: '请输入联系电话' }]
	},
	manufacturerList: [],
	selectVisible: false
});

const handleSelectManufacturer = (x) => {
	state.form.manufacturerId = x.manufacturerId;
	state.form.manufacturerName = x.manufacturerName;
	state.selectVisible = false;
};

const handleInputManufacturer = debounce(async () => {
	const { data } = await searchManufacturer({ name: state.form.manufacturerName });
	state.manufacturerList = data;
	state.selectVisible = true;
}, 500);

const submit = async () => {
	const { ret, message, data } = await saveCompanyUserInfo(state.form);

	if (ret === 0) {
		proxy.$toast.success('完善成功');

		proxy.$storage.set('cid', data?.companyId);
		proxy.$storage.set('companyName', data?.companyName);
		proxy.$storage.set('address', data?.companyAddress);
		proxy.$storage.set('manufacturerId', state.form?.manufacturerId);
		proxy.$storage.set('manufacturerName', state.form?.manufacturerName);

		popupRef.value.close();
	} else {
		proxy.$toast.fail(message);
	}
};

const open = () => popupRef.value.open();

defineExpose({ open });
</script>

<style lang="scss">
.form-containers {
	padding: 16px;
	width: 100%;
	box-sizing: border-box;
	&__title {
		font-size: 16px;
		margin-bottom: 10px;
		text-align: center;
	}

	&__depts {
		position: absolute;
		width: 92%;
		max-height: 368rpx;
		z-index: 100;
		background: #ffffff;
		box-sizing: border-box;
		box-shadow: 0rpx 8rpx 16rpx 2rpx rgba(0, 0, 0, 0.15);
		font-size: 28rpx;
		padding: 16rpx 32rpx;
		border-radius: 8rpx;
		overflow: auto;
		line-height: 24px;
		color: #7e7a7a;
		top: 120px;

		.item {
			font-size: 12px;
			border-bottom: solid 1px #eceaea;
			padding: 8px 16px;
		}
	}
}
</style>
